<template>
	<view>
		<u-navbar :border-bottom='false' back-icon-size='48'>
			<view class="slot-wrop">
				<view class="laction" @click="">
					<u-icon name="map-fill" color="#333333" size="32"></u-icon>
					<text>{{city}}</text>
				</view>
				<view class="line"></view>
				<view class="searchBox">
					<u-search placeholder="周边游" v-model="keyword" :show-action='false' bg-color='#F8F8F8'
						@search="searchFn"></u-search>
				</view>
			</view>
		</u-navbar>
		<!-- 		<u-dropdown>
			<u-dropdown-item v-model="value1" title="推荐排序" :options="options1"></u-dropdown-item>
			<u-dropdown-item v-model="value2" title="天数/出发日期">
				<view class="slot-content">
					<view class="dayBox">
						<view class="lable">
							行程天数 <text>(多选)</text>
						</view>
						<view class="days">
							<scroll-view scroll-x="true" scroll-left="">
								<view class="day-ul">
									<view class="day-li">
										2天
									</view>
									<view class="day-li">
										3天
									</view>
									<view class="day-li">
										4天
									</view>
									<view class="day-li">
										5天
									</view>
									<view class="day-li">
										6天
									</view>
									<view class="day-li">
										7天
									</view>
								</view>

							</scroll-view>
						</view>
					</view>
					<view class="tripDate">
						<view class="lable">
							出发日期
						</view>
						<calendar></calendar>
					</view>
					<view class="btn">
						<view class="btn-li clear">
							清空
						</view>
						<view class="btn-li sub">
							确定
						</view>
					</view>
				</view>
			</u-dropdown-item>
		</u-dropdown> -->
		<view class="content" v-if="tripList.length">
			<u-waterfall v-model="tripList" ref="tripWaterfall">
				<template v-slot:left="{leftList}">
					<view v-for="(item, index) in leftList" :key="index"
						@click="navTo('../travelDetail/travelDetail?id='+item.id)">
						<view class="shopitem">
							<view class="type" style="background:linear-gradient(90deg,#FEE16F,#FFA80D);">
								周边游
							</view>
							<image :src="item.icon" mode=""></image>
							<view class="title">
								{{item.title}}
							</view>
							<view class="price">
								<text style="font-size: 24rpx;">¥</text>{{item.price}}
							</view>
						<!-- 	<view class="price" v-else>
								<text style="font-size: 24rpx;">¥</text>{{item.vip_price}}
							</view> -->
							<view class="price-box">
								<view class="rel-price">
									¥<text>{{Number(item.price)-Number(item.use_welfare_fund)}}</text>
								</view>
							<!-- 	<view class="rel-price" v-else>
									¥<text>{{Number(item.vip_price)-Number(item.use_welfare_fund)}}</text>
								</view> -->
								<view class="fl-price">
									+ {{item.use_welfare_fund}} 福利金
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view v-for="(item, index) in rightList" :key="index"
						@click="navTo('../travelDetail/travelDetail?id='+item.id)">
						<view class="shopitem">
							<view class="type" style="background:linear-gradient(90deg,#FEE16F,#FFA80D);">
								周边游
							</view>
							<image :src="item.icon" mode=""></image>
							<view class="title">
								{{item.title}}
							</view>
							<view class="price">
								<text style="font-size: 24rpx;">¥</text>{{item.price}}
							</view>
						<!-- 	<view class="price" v-else>
								<text style="font-size: 24rpx;">¥</text>{{item.vip_price}}
							</view> -->
							<view class="price-box">
								<view class="rel-price">
									¥<text>{{Number(item.price)-Number(item.use_welfare_fund)}}</text>
								</view>
							<!-- 	<view class="rel-price" v-else>
									¥<text>{{Number(item.price)-Number(item.use_welfare_fund)}}</text>
								</view> -->
								<view class="fl-price">
									+ {{item.use_welfare_fund}} 福利金
								</view>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
		</view>

		<view class="noCont" v-else>
			<u-empty text="暂无线路" mode="list"></u-empty>
		</view>

	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	import calendar from '@/components/calendar/lv-calendar.vue'
	export default {
		components: {
			calendar
		},
		data() {
			return {
				keyword: '',
				value1: '',
				value2: '',
				options1: [{
						label: '推荐排序',
						value: 1,
					},
					{
						label: '销量高 → 低',
						value: 2,
					},
					{
						label: '价格 高 → 低',
						value: 3,
					},
					{
						label: '价格 低 → 高',
						value: 4,
					}
				],
				city: '',
				page: '1',
				tripList: [],
				lat:'',
				lng:''
			}
		},
		onLoad() {
			this.getAroundTrip()
			let that = this
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success(res) {
					that.city = res.address.city
					that.lat = res.latitude
					that.lng = res.longitude
				}
			})
		},
		onReachBottom() {
			let page = Number(this.page) + 1
			this.page = page.toString()
			this.getAroundTrip()
		},
		methods: {
			searchFn() {
				this.page = '1'
				this.$refs.tripWaterfall.clear()
				this.getAroundTrip()
			},
			// 获取线路列表
			async getAroundTrip() {
				let {
					page,
					keyword,
					lng,
					lat
				} = this
				let res = await myRequest.getTravel({
					page: page,
					category_type: '3',
					keyword: keyword,
					lng:lng.toString(),
					lat:lat.toString()
				})
				if (res.status) {
					this.tripList = [...this.tripList, ...res.data]
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrop {
		width: 624rpx;
		height: 68rpx;
		background: #F8F8F8;
		border-radius: 36rpx;
		display: flex;
		align-items: center;

		.laction {
			padding-left: 24rpx;

			text {
				font-size: 28rpx;
				font-family: PingFangSC-Regular;
				color: #333333;
			}
		}

		.line {
			margin-left: 52rpx;
			width: 0px;
			height: 72rpx;
			border: 2rpx solid #FFFFFF;
		}
	}

	.slot-content {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;

		.dayBox {
			padding: 0 20rpx;

			.lable {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;

				text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.days {
				white-space: nowrap;
				margin-top: 20rpx;

				.day-ul {

					.day-li {
						display: inline-block;
						width: 140rpx;
						height: 76rpx;
						background: #F8F8F8;
						border-radius: 4rpx;
						margin-right: 14rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 76rpx;
						color: #333333;
						text-align: center;
					}
				}
			}
		}

		.tripDate {
			margin-top: 40rpx;

			.lable {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				padding-left: 20rpx;
			}
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;

			.btn-li {
				width: 340rpx;
				height: 68rpx;
				background: #FFFFFF;
				border: 2rpx solid rgba(153, 153, 153, 0.4980392156862745);
				border-radius: 8rpx;
				line-height: 68rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				text-align: center;
			}

			.clear {
				color: #333333;
			}

			.sub {
				background: #3587F7;
				color: #FFFFFF;
				border: none;
			}
		}

	}

	.content {
		padding:  0 15rpx;

		.shopitem {
			background-color: #FFFFFF;
			padding-bottom: 20rpx;
			width: 348rpx;
			height: auto;
			overflow: hidden;
			border-radius: 16rpx;
			margin: 20rpx auto 0;
			position: relative;

			.type {
				width: 108rpx;
				height: 40rpx;
				border-radius: 16rpx 0px 16rpx 0px;
				font-size: 24rpx;
				font-family: PingFangSC-Regular;
				color: #FFFFFF;
				text-align: center;
				line-height: 40rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
			}

			image {
				width: 348rpx;
				height: 348rpx;
			}

			.title {
				padding: 0 10rpx;
				font-size: 30rpx;
				font-family: Segoe UI;
				color: #333333;
				margin-top: 10rpx;
				overflow: hidden;
			}

			.price {
				padding-left: 10rpx;
				font-size: 36rpx;
				font-family: Arial;
				font-weight: 400;
				color: #FF4600;
				margin-top: 10rpx;
				text-decoration: line-through
			}

			.price-box {
				padding-left: 10rpx;
				width: fit-content;
				width: -webkit-fit-content;
				width: -moz-fit-content;
				display: flex;
				margin-top: 12rpx;

				.rel-price {
					height: 44rpx;
					width: fit-content;
					width: -webkit-fit-content;
					width: -moz-fit-content;
					background: linear-gradient(180deg, #FBE9B9 0%, #FDE6B8 100%);
					border-radius: 8rpx 0px 0px 8rpx;
					padding: 0 6rpx;
					font-size: 24rpx;
					font-family: Arial;
					font-weight: 400;
					line-height: 44rpx;
					color: #333333;

					text {
						font-size: 32rpx;
						font-weight: bold;
						margin-left: 4rpx;
					}
				}

				.fl-price {
					height: 44rpx;
					width: fit-content;
					width: -webkit-fit-content;
					width: -moz-fit-content;
					background: #333333;
					border-radius: 0px 8rpx 8rpx 0px;
					font-size: 24rpx;
					font-family: Arial;
					font-weight: 400;
					color: #FBE8B8;
					line-height: 44rpx;
					padding: 0 6rpx;
				}
			}
		}
	}

	.noCont {
		padding-top: 320rpx;
	}
</style>
